//     IQC质量看板
import './index.scss'
import  Zooks from './hook'
import {useState,useEffect,useRef}from 'react';
import { Layout ,Col, Row, Button,} from 'antd';
import {  DiffOutlined, FileDoneOutlined, FileSyncOutlined,DeleteOutlined,SafetyOutlined ,SafetyCertificateOutlined} from '@ant-design/icons'
import { Column, Pie ,Bar} from '@ant-design/plots';
import { useNavigate } from 'react-router-dom';
import axios from'../../../../utils/axios'


const { Header,   Content ,Footer} = Layout;
const style: React.CSSProperties = { background: '', };
//饼图
const DemoPie = () => {
  
  const [data,setData] = useState([]) 
  useEffect(()=>{
   axios({
      method: 'get',
      url: '/examine/material-pc/findMaterialCount ',
      params: {
      }
    })
      .then(function (res) {
        console.log('请求数据成功zzz')
        console.log(res.data.data);
        setData(res.data.data);
    
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  },[]
  )
  const config = {
    appendPadding: 10,
    // legend: false, TS 不兼容 
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          color:'white',
        },
        content: '总数据',
      },
    },
  };
  return <Pie {...config} />;
};
//横图
const DemoBar = () => {
  // const data=[
  //   {
  //     rate:'100%',
  //     userCode:'QC004',

  //   },
  //   {
  //     rate:'0%',
  //     userCode:'QC005',

  //   },
  //   {
  //     rate:'59.09%',
  //     userCode:'QC001',

  //   },
  // ]
  const [data,setData] = useState([]) 
  useEffect(()=>{
    axios({
      method: 'get',
      url: '/examine/material-pc/findMaterialRate',
      params: {
      }
    })
      .then(function (res) {
        console.log('请求数据成功w')
        console.log(res.data.data);
        res.data.data.forEach((item: any,index:  number) => {
        item.rate=Math.round(res.data.data[index].rate*10000)/100
        });
     
       
        console.log(res.data.data);

         setData(res.data.data);
    
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  },[])
  const config = {
    padding:[40,40,80,80],
    data,
  
    xField: 'rate',
    yField: 'userCode',
    // conversionTag: {},
    barWidthRatio: 0.8,
    label:{
      style: {
        fill: '#FFFFFF',
        opacity: 1,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
        style: {
          fill: '#ffffff',
          opacity: 1,
        },
      },
    },
    yAxis:{
      label:{
       style: {
         fill: '#ffffff',
         opacity: 1,
      },
     }
    },
    
  };
  // const data = [
  //   {
  //     action: '浏览网站',
  //     pv: 50000,
  //   },
  //   {
  //     action: '放入购物车',
  //     pv: 35000,
  //   },
  //   {
  //     action: '生成订单',
  //     pv: 25000,
  //   },
    
  // ];
  // const config = {
  //   padding:[40,40,80,80],
  //   data,
  //   xField: 'pv',
  //   yField: 'action',
    
  //   conversionTag: {},
  //   label:{
  //         style: {
  //           fill: '#FFFFFF',
  //           opacity: 1,
  //         },
  //       },
  //   xAxis: {
  //         label: {
  //           autoHide: true,
  //           autoRotate: false,
  //           style: {
  //             fill: '#ffffff',
  //             opacity: 1,
  //           },
  //         },
  //       },
  //       yAxis:{
  //         label:{
  //          style: {
  //            fill: '#ffffff',
  //            opacity: 1,
  //         },
  //        }
  //       },
  // };
  return <Bar {...config} />;
};
//统计图
const DemoColumn = () => {
  const [data,setData] = useState([]) 
  useEffect(()=>{
   axios({
      method: 'get',
      url: '/examine/material-pc/findCount ',
      params: {}
    })
      .then(function (res) {
        console.log('请求数据成功2')
        console.log(res.data.data);
        setData(res.data.data);
    
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  },[]
  )
  // const data = [
  //   {
  //     name: 'London',
  //     月份: 'Jan.',
  //     月均降雨量: 18.9,
  //   },{
  //     name: 'Berlin',
  //     月份: 'Jan.',
  //     月均降雨量: 12.4,
  //   },{
  //     name: 'Beijing',
  //     月份: 'Jan.',
  //     月均降雨量: 12.4,
  //   },
  //  ];
  const config = {
    padding:[40,40,80,40],
    data,
    isGroup: true,
    xField: 'time',
    yField: 'value',
    seriesField: 'name',
    marginRatio: 0.6,
    label: {
      style: {
              fill: '#FFFFFF',
                opacity: 0,
             },
     
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
    xAxis: {
            label: {
              autoHide: true,
              autoRotate: false,
              style: {
                fill: '#ffffff',
                opacity: 1,
              },
            },
          },
          yAxis:{
            label:{
             style: {
               fill: '#ffffff',
               opacity: 1,
            },
           }
       }
}
  ;
  return <Column {...config} />;
};



//页面
const QualityBillboard = ()=> {
  //首页数据
  const [home,setHome]=useState<any>({})
  const getHome=()=>{
    axios({
      method: 'get',
      url: '/examine/IntegratedQueryCount',
      params: {
      }
    })
      .then(function (res) {
        // console.log('请求首页数据成功')
        // console.log(res.data.data);
        let  i =Math.round(res.data.data.completionRate*10000)/100+'%';
        let  z =Math.round(res.data.data.qualified*10000)/100+'%';
        // console.log(i,z);
        res.data.data.qualified=z;
        res.data.data.completionRate=i;
        setHome(res.data.data)
    
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  }


  //路由跳转
  const navigate = useNavigate()
  const fallBack=()=>{
  navigate('/home/first/homepage')
  }
  //全屏功能
  const [isqp ,setLisqp]=useState(true)
  const [qp,setQp]=useState('全屏')

  //
  useEffect(()=>{
    getHome();
  
  },[])
  const inputEl = useRef(null);
  const fullScreen=()=>{
    
    let de = document.documentElement;
       if (isqp) {
            setQp('退出')
           setLisqp(false);
           de.requestFullscreen();       
           if(true){
            console.log(111);
            
          document.documentElement.style.fontSize=16*document.documentElement.clientHeight/960+'px';
           ( document.body as HTMLElement).style.overflowY='hidden';
         
          // document.documentElement.style.fontSize=16*document.documentElement.clientHeight/1100+'px';
       
         }

     }else{ 
       setLisqp(true);
       setQp('全屏')
       document.exitFullscreen();
      //  ( document.body as HTMLElement).style.overflowY='scroll';
      ( document.body as HTMLElement).style.overflowY='scroll';
      ( document.documentElement as HTMLElement).style.fontSize='1rem';
      //  ( inputEl.current as unknown as HTMLElement).style.marginBottom= 50+'px';
      
     }
    }   
  return <>
    <Layout  className='Layoutclass'   ref={inputEl}>
      <Header className="headerimg">
        <Row>
          <Col span={8}   className='timestyle'>
             <Zooks/>
            <Button type="primary" shape="default"  className='btnclass' onClick={fallBack}>返回</Button>
          </Col>
          <Col span={8} className='headflex' > 
          IQC质量管理看板 
          </Col>
          <Col span={8}  className='headbtn' >
           <Button  type="primary" shape="default"  onClick={()=>{
             fullScreen()}} >{qp}</Button>
          </Col>
        </Row>
      </Header>

      <Content className='mainclass'>
         <div className='h2class'> 今日检验概况</div> 
       
       <Row className='rowclass'>
          <Col span={3} className='box'>
            <div style={style} className="boximg">
              <div className='borderstyle1'>
                <DiffOutlined />
              </div>
              <span className='spanclass'> 合格批数{home.approval} </span>
             
            </div>
          </Col>
          <Col span={3}className='box'>
            <div style={style} className="boximg">
              <div  className='borderstyle2'>
                <DiffOutlined />
              </div>
              <span> 让步批数{home.yield}</span>
            </div>
          </Col>
          <Col span={3}className='box'>
            <div style={style} className="boximg">
              <div  className='borderstyle3' >
              <DeleteOutlined />
              </div>
              <span> 退货批数{home.returned}</span>
            </div>
          </Col>
          <Col span={3}className='box'>
            <div style={style} className="boximg">
              <div  className='borderstyle4'>
                <FileSyncOutlined />
              </div>
              <span> 评审批数{home.checked}</span>
            </div>
          </Col>
          <Col span={3}className='box'>
            <div style={style} className="boximg">
              <div  className='borderstyle5'>
                <FileDoneOutlined />
              </div>
              <span>来料总批数{home.totalBatches}</span>
            </div>
          </Col>
          <Col span={3}className='box'>
            <div style={style} className="boximg">
              <div  className='borderstyle6'>
              <FileDoneOutlined />
              </div>
              <span> 检验完成数{home.finish}</span>
            </div>
          </Col>
          <Col span={3}className='box'>
            <div style={style} className="boximg">
              <div  className='borderstyle7'>
              <SafetyOutlined />
              </div>
              <span> 完成率{home.completionRate}</span>
              <div></div>
            </div>
          </Col>
         <Col span={3}className='box'>
            <div style={style} className="boximg">
              <div  className='borderstyle7'>
              <SafetyCertificateOutlined />
              </div>
              <span> 合格率{home.qualified}</span>
            </div>
          </Col>
      
       </Row>
      </Content>

      <Footer className='footclass'>  
          <Row className='rowcss'> 
            <Col span={9} className='echartsimg'>
            <div className='h3class'> 今日检验统计</div> 
              
            <DemoColumn/>
            </Col>
            <Col span={7} className='echartsimg2'>
              
            <div className='h3class'> 今日物料组检验统计</div> 
            <DemoPie/>
            </Col>
            <Col span={7} className='echartsimg'>
            <div className='h3class'> 今日检察员检验统计</div> 
              
            <DemoBar/>
            </Col>
          </Row>
          <Row>
            <Col span={9} className='echartsimg'>
            <div className='h3class'> 日检验合格率总览</div> 
            <DemoColumn/>

            </Col>
            <Col span={7} className='echartsimg2'>
              
            <div className='h3class'> 日来料缺陷分布统计</div> 
            <DemoPie/>
            </Col>
            <Col span={7} className='echartsimg'>
            <div className='h3class'> 本月供应商合格率</div> 
              
            <DemoBar/>
            </Col>
          </Row>
      </Footer>

    </Layout>

  </>
}








 
export default QualityBillboard